<template>
  <div class="musiclist_container">
    <div class="music_main" v-if="musicListDetail">
      <div class="listinfo">
        <!-- 封面图片区域 -->
        <div class="music_left">
          <img :src="musicListDetail.coverImgUrl" alt="" />
        </div>
        <!-- 文字区域 -->
        <div class="music_right">
          <!-- 标题 -->
          <div class="music_title">
            <div class="titleTag">歌单</div>
            <div class="title_content">{{ musicListDetail.name }}</div>
          </div>
          <!-- user区域 -->
          <div class="user" v-if="musicListDetail.creator">
            <img :src="musicListDetail.creator.avatarUrl" alt="" />
            <div class="username" @click="goPersonal">
              {{ musicListDetail.creator.nickname }}
            </div>
            <div class="createtime">
              {{ musicListDetail.createTime | dateformat }}
            </div>
          </div>
          <!-- 操作区域 -->
          <div class="button">
            <div class="buttonItem playAll" @click="playAll">
              <i class="iconfont icon-24gl-play"></i>
              <span>播放全部</span>
            </div>

            <div class="buttonItem" @click="Subscribe">
              <i
                class="iconfont icon-aixin"
                :class="isSubscribe ? 'red' : ''"
              ></i>
              <span>{{ this.isSubscribe ? "已收藏" : "收藏" }}</span>
            </div>
            <div class="buttonItem">
              <i class="iconfont icon-fenxiang"></i>
              <span>分享</span>
            </div>
          </div>
          <!-- 标签 -->
          <div class="tag">
            标签:
            <div
              class="tagItem"
              v-for="(item, index) in musicListDetail.tags"
              :key="index"
            >
              {{ item }}
            </div>
            <div class="tagItem">华语</div>
          </div>
          <!-- 其他歌曲信息 -->
          <div class="otherinfo">
            <div class="musicNum">歌曲：{{ musicListDetail.trackCount }}</div>
            <div class="playNum">播放： {{ musicListDetail.playCount }}</div>
          </div>
          <!-- 简介 -->
          <div class="desc">
            简介：
            {{
              musicListDetail.description
                ? musicListDetail.description
                : "暂无简介"
            }}
          </div>
        </div>
      </div>
      <!-- 歌曲列表 -->
      <div class="musiclistItem">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="歌曲列表" name="first">
            <!-- 表格 -->
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              lazy
              @cell-dblclick="clickRow"
              highlight-current-row
            >
              <el-table-column width="40" type="index" :index="handleIndex">
              </el-table-column>
              <el-table-column width="60">
                <i class="iconfont icon-xiazai"></i>
              </el-table-column>
              <el-table-column prop="name" label="音乐标题" min-width="350">
              </el-table-column>
              <el-table-column prop="ar[0].name" label="歌手" min-width="120">
              </el-table-column>
              <el-table-column prop="al.name" label="专辑" min-width="170">
              </el-table-column>
              <el-table-column prop="dt" label="时长" min-width="100">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 评论 -->
          <el-tab-pane label="评论" name="second">
            <div class="commentslist">
              <commend
                :CommentList="commentList.hotComments"
                :showInput="true"
                @setCommendValue="setCommendValue"
              >
                <div slot="title" class="title-comments">精彩评论</div>
              </commend>
              <commend
                :CommentList="commentList.comments"
                :showInput="false"
                class="comments"
              >
                <div slot="title" class="title-comments">最新评论</div>
              </commend>
            </div>
            <!-- 分页 -->
            <div class="page">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="commentList.total"
                :page-size="50"
                :current-page="currentCommentPage"
                @current-change="commentPageChange"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="收藏者" name="third">
            <user-list-card :musicFollowedList="musicFollowed"></user-list-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <back-top></back-top>
  </div>
</template>

<script>
import { handleMusicTime } from "../../filters";
import Commend from "@/components/commend/Commend.vue";
import BackTop from "../../components/goTop/BackTop.vue";
import UserListCard from "../../components/userlistcard/UserListCard.vue";
export default {
  name: "MyMusicListDetail",
  components: {
    Commend,
    BackTop,
    UserListCard,
  },

  data() {
    return {
      // 歌单信息
      musicListDetail: [],
      // 歌曲信息
      tableData: [],
      // 评论信息
      commentList: [],
      // 当前评论页数
      currentCommentPage: 1,
      // 默认选择第一个tab
      activeTab: "first",
      // 收藏者信息
      musicFollowed: [],
      // 用户是否收藏当前歌单
      isSubscribe: false,
    };
  },
  created() {
    this.getMusicListDetail();
    this.getMusicDetail();
    this.getCommendList();
    this.getMusicListFolloweds();
  },

  methods: {
    // 根据传来的id获取歌单详情
    async getMusicListDetail() {
      var timestamp = Date.parse(new Date());
      const result = await this.$http("/playlist/detail", {
        params: { id: this.$route.params.id },
        timestamp,
      });
      // console.log(result);
      this.musicListDetail = result.data.playlist;
    },
    // 事件函数
    handleIndex(index) {
      // console.log(index);
      index += 1;
      if (index < 10) {
        return "0" + index;
      } else {
        return index;
      }
    },
    // 点击用户者名称事件回调
    goPersonal() {
      this.$router.push({
        name: "personal",
        params: { uid: this.musicListDetail.creator.userId },
      });
    },
    // 获取歌曲详情
    async getMusicDetail() {
      const { data: res } = await this.$http("playlist/detail", {
        params: { id: this.$route.params.id },
      });
      // console.log(res);
      this.tableData = res.playlist.tracks;
      this.tableData.forEach((item, index) => {
        this.tableData[index].dt = handleMusicTime(item.dt);
      });
    },
    // 获取评论
    async getCommendList() {
      // 获取时间戳
      var timestamp = Date.parse(new Date());
      const { data: res } = await this.$http("comment/playlist", {
        params: { id: this.$route.params.id },
        limit: 50,
        timestamp,
      });
      this.commentList = res;
      // console.log(this.commentList);
    },
    // 当前页数变化时触发
    commentPageChange(currentindex) {
      this.currentCommentPage = currentindex;
      this.getMusicListDetail("changePage");
    },

    // 获取收藏者信息
    async getMusicListFolloweds() {
      const { data: res } = await this.$http("playlist/subscribers", {
        params: { id: this.$route.params.id },
      });
      // console.log(res);
      this.musicFollowed = res.subscribers;
    },
    // 点击el-table的行的回调函数
    clickRow(row) {
      // console.log(row);
      this.$store.commit("updateMusicId", row.id);
      this.$store.commit("updateCurrentRowInfo", row);

      // 如果歌单发生变化则提交歌单到vuex中
      if (this.musicListDetail.id != this.$store.state.musicListId) {
        // 将歌单传到vuex
        this.$store.commit("updateMusicList", {
          musicList: this.musicListDetail.tracks,
          musicListId: this.musicListDetail.id,
        });
      }
    },
    // 评论事件
    async setCommendValue(value) {
      const { data: res } = await this.$http("/comment", {
        params: {
          t: 1,
          type: 2,
          id: this.musicListDetail.id,
          content: value,
        },
      });
      // console.log(res);
      if (res.code === 200) {
        this.$message.success("评论成功");
      } else {
        this.$message.error("评论失败，请稍后再试");
      }
      this.getCommendList();
    },
    // 点击收藏歌单事件
    async Subscribe() {
      if (!this.$store.state.isLogin) {
        this.$message.error("请先进行登录操作!");
        return;
      }
      this.isSubscribe = !this.isSubscribe;
      const { data: res } = await this.$http("/playlist/subscribe", {
        params: { id: this.musicListDetail.id, t: this.isSubscribe ? 1 : 2 },
      });
      console.log(res);
      this.getMusicListDetail();
    },
    //点击播放全部
    playAll() {
      this.$store.commit("updateMusicId", this.musicListDetail.tracks[0].id);
      this.$store.commit("updateMusicList", {
        musicList: this.musicListDetail.tracks,
        musicListId: this.musicListDetail.id,
      });
    },
  },
};
</script>

<style scoped lang="less">
.music_main {
  margin: 10px 30px;
}
.listinfo {
  display: flex;
  align-items: center;
  margin-top: 20px;
  width: 100%;
  height: 250px;
}
.musiclist {
  width: 100%;
  height: 500px;
  margin: 10px 0;
}
.music_left {
  /* float: left; */
  width: 230px;
  height: 230px;
  margin-left: 20px;
  margin-right: 40px;
}
.music_left img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.music_right {
  margin-top: 50px;
  width: 1000px;
  height: 250px;
}
.music_title {
  width: 1000px;
  height: 30px;
}
.titleTag {
  width: 30px;
  float: left;
  font-size: 12px;
  color: #ec4141;
  border: 1px solid #ec4141;
  padding: 5px 2px;
  border-radius: 2px;
  margin-right: 5px;
  transform: scale(0.8);
}
.title_content {
  float: left;
  font-size: 25px;
  font-weight: 600;
  color: #373737;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90%;
}
.user {
  width: 1000px;
  height: 30px;
  display: flex;
  align-items: center;
}
.user img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.username {
  font-style: 14px;
  color: #6191c2;
  margin-right: 8px;
  cursor: pointer;
}
.createtime {
  margin-top: 6px;
  font-size: 12px;
  width: 78px;
  height: 20px;
  color: #666666;
}
.button {
  display: flex;
  margin: 8px 0 0 -5px;
}
.buttonItem {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  transform: scale(0.9);
  cursor: pointer;
  i {
    margin-right: 5px;
  }
}
.buttonItem .red {
  color: red;
}
.playAll {
  background-color: #ec4141;
  color: white;
}
.tag {
  margin: 10px 0 0 -30px;
  display: flex;
  transform: scale(0.9);
}
.tagItem {
  color: #6191c2;
  margin-right: 5px;
}
.otherinfo {
  margin: 10px 0 0 -30px;
  display: flex;
  transform: scale(0.9);
}
.musicNum {
  margin-right: 13px;
}
.desc {
  margin: 10px 0 0 -30px;
  font-size: 16px;
  transform: scale(0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musiclistItem {
  margin: 40px;
}
.commentslist {
  width: 90%;
  height: 100%;
}
.comments {
  margin-top: 30px;
}
.title-comments {
  width: 100%;
  height: 30px;
  text-align: left;
  font-size: larger;
  font-weight: 600;
}
.page {
  width: 40%;
  margin: 30px auto;
}
</style>